<template>
	<view class="content">
		<view class="header">
			<image class="header-bj" src="@/static/images/integral/background2.png"></image>
			<view class="header-info">
				<view class="user">
					<image
						v-if="userInfo.headUrl"
						class="user-avatar"
						:src="userInfo.headUrl"
					></image>
					<image
						class="user-avatar"
						v-else
						src="@/static/images/member/default-avatar.png"
					/>
					<view class="user-info">
						<view class="user-info__value">我的积分</view>
						<view class="user-info__num">{{ userInfo.jfScore || '00' }}</view>
					</view>
				</view>
				<view class="header-rule" @tap="showTips">
					活动规则
				</view>
			</view>
			<view class="task-box">
				<view class="task-box__title">我的任务</view>
				<view v-if="list.length > 0">
					<block v-for="(item, index) in list" :key="index">
						<task-li :item="item" @refresh="taskRefresh" @sign="goSign"></task-li>
					</block>
					<LoadMore :finished="isReachBottom"></LoadMore>
				</view>
				<LoadMore v-else :empty="true" emptyText="暂无任务"></LoadMore>
			</view>
		</view>
		<popup ref="copyPopup" class="copy-popup">
			<view class="tips-box">
				<view class="tips-box__title">
					<text>活动规则</text>
					<text class="iconfont icon-guanbi" @tap='closePopup'></text>
				</view>
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="MsoNormal">一.活动规则：</view>
					<view
						>1.用户登录嗨返APP，即可参加该活动，该活动旨在维系客户关系、答谢客户支持，用户完成赚积分任务后，均可获得一定额度的积分奖励。</view
					>
					<view
						>2.积分可兑换补贴红包，补贴红包可用于满足条件的订单，并和订单补贴一起到账到我的余额。</view
					>
					<view>3.本活动的解释权归嗨返所有。</view>
					<view>4.本活动与Apple Inc.无关。</view>
					<view class="MsoNormal">二.注意事项：</view>
					<view
						>1、用户不得以任何不正当手段或舞弊方式参与本活动。一经发现，嗨返有权采取限制登录、封禁账号、撤消活动资格、限制提现、账号金额清零、限制再次注册使用等措施，亦有权收回用户已领取的现金红包、追讨已提现的金额，并保留追究该用户责任的权利。如因此给用户造成损失，本平台不进行任何赔偿或补偿。不正当手段及舞弊行为包括但不限于：下载非官方客户端；使用模拟器、插件、外挂等非法工具扫码、下载、安装、注册、登录、赠与、领取红包、提现；注册多个账号；篡改设备数据；恶意牟利等扰乱平台秩序；使用插件、外挂、系统或第三方工具对本平台及本活动进行干扰、破坏、修改或施加其他影响及本平台认为的其他不正当手段。</view
					>
					<view>2.如您在参加本活动中存在造假、作弊等违规操作行为，嗨返有权收回已向您发放的奖励并取消您参加本活动的资格</view>
					<view>3.嗨返可在法律法规允许的范围内对本活动进行解释并做出适当修改</view>
				</scroll-view>
			</view>
		</popup>
		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
import Popup from '@/components/uni/Popup';
import TaskLi from '@/components/integral/TaskLi';
import LoadMore from '@/components/LoadMore';
import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			params: {
				page: 1,
				size: 20
			},
			list: [],
			pagination: {},
			isNull: false,
			isReachBottom: false
		};
	},
	components: {
		Popup,
		TaskLi,
		LoadMore
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	onShow() {
		this.$nextTick(() => {
			uni.getClipboardData({
				success: res => {
					if (res.data && this.$store.state.common.aiSearch) {
						this.$refs.aiSearch.open(res.data);
						this.$store.commit({
							type: 'setAiSearch',
							aiSearch: false
						});
					}
				}
			});
		});

		this.getList({ ...this.params });		
	},
	onHide() {
		this.$refs.aiSearch.close();
	},

	methods: {
		getList(params) {
			this.$service.integral.score
				.page(params)
				.then(res => {
					this.dataNext(res.list);
					this.pagination = res.pagination;
					if (res.pagination.total == 0) {
						this.isNull = true;
					} else {
						this.isNull = false;
					}
					uni.stopPullDownRefresh();
				})
				.catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.message
					});
					uni.stopPullDownRefresh();
				});
		},
		dataNext(list) {
			if (this.pagination.page > 1) {
				this.list = this.list.concat(list);
			} else {
				this.list = list;
			}
		},
		taskRefresh() {
			this.getList({
				...this.params,
				page: 1
			});
		},
		showTips() {
			this.$refs['copyPopup'].open();
		},
		closePopup(){
			this.$refs['copyPopup'].onTap();
		},
		goSign() {
			uni.navigateBack({
				delta: 1
			})
		}
	},
	onPullDownRefresh() {
		this.getList({
			...this.params,
			page: 1
		});
	},
	onReachBottom() {
		if (
			this.pagination.page * (this.pagination.pageSize || this.pagination.size) >=
			this.pagination.total
		) {
			this.isReachBottom = true;
		} else {
			this.isReachBottom = false;
			this.getList({
				...this.params,
				page: this.pagination.page + 1
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.content {
	background: #f6f7fa;
	height: 100vh;
	.header {
		width: 100%;
		height: 547rpx;
		position: relative;
		.header-bj {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
		}
		.header-info {
			position: relative;
			z-index: 20;
			@include flexBox(space-between, center);
			padding-top: 24rpx;
			.user {
				@include flexBox(null, center);
				margin-left: 40rpx;
				.user-avatar {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
				}
				.user-info {
					color: #ffffff;
					margin-left: 30rpx;
					&__value {
						font-size: 28rpx;
					}
					&__num {
						font-size: 56rpx;
					}
				}
			}
			.header-rule {
				width: 146rpx;
				height: 52rpx;
				background: #ffffff;
				border-radius: 34rpx 0 0 34rpx;
				color: #ff2f35;
				font-size: 28rpx;
				text-align: center;
				line-height: 52rpx;
			}
		}
		.task-box {
			width: 714rpx;
			margin: auto;
			border-radius: 18rpx;
			background: #ffffff;
			margin-top: 28rpx;
			position: relative;
			z-index: 30;
			&__title {
				color: #383041;
				font-size: 32rpx;
				padding: 28rpx 40rpx;
			}
			/deep/.li {
				margin: 34rpx;
				padding-bottom: 34rpx;
				border-bottom: 2rpx solid #f5f5f6;
			}
		}
	}
	.tips-box {
		width: 580rpx;
		height: 554rpx;
		background: #ffffff;
		border-radius: 12rpx;
		overflow: hidden;
		&__title {
			margin-top: 30rpx;
			text-align: center;
			font-size: 32rpx;
			position: relative;
			.iconfont{
				position: absolute;
				top: 0;
				right: 20rpx;
			}
		}
		.scroll-Y {
			margin-top: 20rpx;
			height: 400rpx;
			width: 100%;
			padding: 0rpx 30rpx;
			font-size: 26rpx;
			.MsoNormal {
				font-size: 30rpx;
			}
		}
	}
}
</style>
